<template>
	<view>
		<view class="margin mt-16" style="color: #9b9b9b;">
			<!-- 1 -->
			<view class="list flex justif-between">
				<view class="item text-xl " v-for="v,i in cateList" :key="i">
					{{v}}
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<!-- 2 -->
			<view class="example-body" v-if="false">
				<u-row :gutter="10">
					<u-col :span="9">
						<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
					</u-col>
					<u-col :span="3">
						<button type="primary">查询</button>
					</u-col>
				</u-row>
			</view>
			<u-gap height="16"></u-gap>
			<!-- 3 -->
			<view class="" v-if="false">
				<u-row :gutter="10">
					<u-col :span="9">
						<uni-data-select v-model="value" :localdata="range" @change="changeS"></uni-data-select>
					</u-col>
					<u-col :span="3">
						<button type="primary">处理</button>
					</u-col>
				</u-row>
			</view>
			<!-- 4 -->
			<view class="">
				<u-search placeholder="设备名" @search="getList" v-model="form.name"></u-search>
			</view>




			<u-gap height="16"></u-gap>
			<!-- 5 -->
			<view class="list">
				<view class="item mt-10" v-for="(val,i) in list" :key="i">
					<uni-card :is-shadow="false" is-full>
						<!--  -->
						<view class="flex justif-between">
							<view class="time text-xl">
								{{val.updateTime || '暂无'}}
							</view>
							<!-- 							<view class="status">
								处理
							</view> -->
						</view>
						<!--  -->
						<view class="my-10 line">

						</view>

						<!--  -->
						<u-row gutter="20" class="mt-10">
							<u-col :span="4" v-if="val.totalAlarm == 0">
								<image
									@click="$pub.go(`/pages/index/detailGoods/detailGoods?data=${encodeURIComponent(JSON.stringify(val))}`)"
									src="/static/logo.png" style="width: 212rpx;height: 214rpx;" mode="heightFix">
								</image>
							</u-col>
							<u-col :span="4" v-if='val.totalAlarm > 0'>
								<view class="border-4" 
								@click="$pub.go(`/pages/index/detailGoods/detailGoods?data=${encodeURIComponent(JSON.stringify(val))}`)"
								style="width: 212rpx;height: 214rpx;background: red;" >
								</view>
							</u-col>
							<u-col :span="1">
							</u-col>
							<u-col :span="7" class="">
								<view class="flex">
									<h4 class="pr-5">
										设备名
									</h4>
									<u-text :lines="2" :text="val.name">
									</u-text>
								</view>
								<view class="flex mb-2">
									<h4 class="pr-5">
										设备状态
									</h4>
									<view class="">
										{{val.totalAlarm > 0 ?'异常':'正常'}}
									</view>
								</view>
								<u-row :gutter="10">
									<u-col :span="5">
										<button class="" v-if="val.deviceType == '2'"
										@click="$pub.go(`/pages/index/rubbishTotal/rubbishTotal?data=${encodeURIComponent(JSON.stringify(val))}`)"
											type="primary" size="mini">垃圾总量</button>
									</u-col>
									<u-col :span="5">
										<!-- @click="$pub.go(`/pages/index/editGoods/editGoods?data=${encodeURIComponent(JSON.stringify(val))}`)" -->
										<button class=""
										@click="$pub.go(`/pages/index/detailGoods/detailGoods?data=${encodeURIComponent(JSON.stringify(val))}`)"
											type="primary" size="mini">详细信息</button>
									</u-col>
								</u-row>
							</u-col>
						</u-row>
					</uni-card>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/device/device.js'
	export default {
		data() {
			return {
				cateList: ['在线', '数据', '报警'],
				datetimerange: null,
				value: null,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				d: '',
				/*  */
				list: [],
				form: {
					name: '',
					pageNum: 1,
					pageSize: 5
				},
				total: 0
			}
		},
		methods: {
			async getList() {
				let re = await getList(this.form)
				console.log(re, "re");
				this.total = re.total;
				this.list = re.rows
			},
			change() {

			},
			changeS() {

			},
		},
		onLoad() {

		},
		onShow() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.index {}
</style>
<style>
	page {
		/* background-color: #f3f3f3; */
	}
</style>